import React, { Component } from 'react';
import 'leaflet/dist/leaflet.css'
import L from 'leaflet'
import "./leaflet.css"

export default class LeafLet extends Component {

    // 二维地图实例
    mymap
    // 鼠标是否在二维地图内
    isMouseIn
    mybounds
    constructor() {
        super()
        this.state = {
            zoom: 2.8,
            latitude: null,
            longitude: null,
            isIn: false
        }
    }
    componentDidMount() {
        // 二维地图实例挂载到mapDOM上
        this.mymap = L.map('map', {
            zoomSnap: 0.1,
        })
        this.mymap.setView([30, 115], 2.8);
        // 
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
            minZoom: 1.5,
            maxZoom: 18,
            bounds: this.mybounds,
            maxBounds: this.mybounds

        }).addTo(this.mymap);

        this.bindEvent()
        this.myMouseMove()
        // 子传父
        this.props.leafletToData(this)
        const southWest = L.latLng(-4.348444140024341, 55.23637211218574)
        const northEast = L.latLng(55.56618240508567, 174.77279467906465)
        this.mybounds = L.latLngBounds(southWest, northEast);
    }
    componentDidUpdate() {
        if (this.props.flag === "dataToLeaflet") {
            this.myFlyTo(this.props.data)
        }
    }
    // 联动函数
    myFlyTo = (data) => {
        let zoom
        zoom = this.heightToZoom(data.heightView)
        if (zoom > 18) zoom = 18
        if (zoom < 1.5) zoom = 1.5
        if (data.latitude) {
            const center = L.latLng(data.latitude, data.longitude)
            this.mymap.flyTo(center, zoom)
        } else {
            this.mymap.setZoom(zoom)
        }
    }
    mySetZoom = () => {

    }
    // 视高转对应层级
    heightToZoom = (height) => {
        var A = 40487.57;
        var B = 0.00007096758;
        var C = 91610.74;
        var D = -40467.74;
        return (D + (A - D) / (1 + Math.pow(height / C, B))).toFixed(1);
    }

    // 层级转对应视高
    zoomToHeight = (zoom) => {
        var A = 28088650;
        var B = 3.85537;
        var C = 2.700697;
        var D = -95268.83
        return (D + (A - D) / (1 + Math.pow(zoom / C, B))).toFixed(1);

    }

    // 绑定事件监听传值
    bindEvent = () => {
        this.mymap.on('move', () => {
            const data = this.mymap.getCenter()

            // 鼠标在二维地图才执行操作
            if (this.isMouseIn) {
                this.props.setDatas({
                    latitude: data.lat,
                    longitude: data.lng
                }, "dataToCesium")
                // 获取边界
                const leftdown = this.mymap.getBounds().getSouthWest()
                const rightdown = this.mymap.getBounds().getNorthEast()
                this.mybounds = L.latLngBounds(leftdown, rightdown)
            }

        })
        this.mymap.on('zoom', () => {
            const zoom = this.mymap.getZoom()
            this.setState({
                zoom: zoom
            })
            let height = this.zoomToHeight(zoom)
            if (height < 500) height = 500
            if (this.isMouseIn) {
                this.props.setHeight({ heightView: height }, "dataToCesium")
            }
        })
    }
    // 鼠标移入事件
    myMouseMove = () => {
        this.mymap.on('mouseover', () => {
            this.isMouseIn = true
            this.setState({
                isIn: true
            })
        })
        this.mymap.on('mousemove', (e) => {
            this.setState({
                latitude: e.latlng.lat.toFixed(4),
                longitude: e.latlng.lng.toFixed(4)
            })
        })
        this.mymap.on('mouseout', () => {
            this.isMouseIn = false
            this.setState({
                isIn: false
            })
        })
    }
    // 
    showOnlyTwo = () => {
        setTimeout(() => {
            this.mymap.invalidateSize(true);
        }, 10)
    }
    same = () => {
        setTimeout(() => {
            this.mymap.invalidateSize(true);
        }, 10)
    }
    render() {
        return (
            <div>
                <div id="map"></div>
                <div className={this.state.isIn ? "info" : "hiddenInfo"}>
                    <div>经度:{this.state.longitude}</div>
                    <div>纬度:{this.state.latitude}</div>
                    <div>缩放层级:{Math.round(this.state.zoom)}</div>
                </div>
            </div >
        )
    }

}
